<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="../../ohter/js库/mock.js"></script>
  <script src="../../ohter/js库/vue.js"></script>
  <title>学成在线</title>
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>
  <div id="root">
    <div class="w header">
      <img src="../../picture/images/logo_03.jpg" class="logo" alt="#">
      <ul class="nav">
        <li><a href="#">首页</a></li>
        <li><a href="#">课程</a></li>
        <li><a href="#">职业计划</a></li>
      </ul>
      <div class="search">
        <input type="text" placeholder="输入关键词"></input>
        <button></button>
      </div>
      <div class="user">
        <a href="#" class="hearpicture"></a>
        <span>唐纳德dfv 特朗普</span>
      </div>
    </div>
    <div class="banner">
      <div class="w bangxing">
        <ul class="subnav">
          <li v-for="su in subnavList">
            <a href="#">{{su}} <span>></span></span></a>
          </li>
        </ul>
        <div class="course">
          <h1 class="title">我的课程表</h1>
          <div class="bd">
            <ul>
              <li><a href="#">
                  <h4>继续学习 <span>程序设计语言</span></h4>
                  <p>正在学习-<span>面向对象</span></p>
                </a></li>
              <li><a href="#">
                  <h4>继续学习 <span>程序设计语言</span></h4>
                  <p>正在学习-<span>面向对象</span></p>
                </a></li>
              <li><a href="#">
                  <h4>继续学习 <span>程序设计语言</span></h4>
                  <p>正在学习-<span>面向对象</span></p>
                </a></li>

            </ul>
            <a href="#" class="all">全部课程</a>
          </div>
        </div>

      </div>

    </div>
    <div class="w jp1">
      <a href="#" class="one">精品推荐</a>
      <ul>
        <li><a href="#">jQuery</a></li>
        <li><a href="#">spark</a></li>
        <li><a href="#">MySql</a></li>
        <li><a href="#">JavaWeb</a></li>
        <li><a href="#">springboot</a></li>
        <li><a href="#">c#</a></li>
      </ul>
      <a href="#" class="two">修改兴趣</a>
    </div>
    <div class="w jp2">
      <div class="head">
        <h3>精品推荐</h3>
        <a href="#">查看全部</a>
      </div>
     <ul class="w">
      <li class="one top">
        <img src="../../picture/all.jpeg" alt="">
        <div class="bottom">
         <h3 class="title">java从零基础到frevdcsddd大师</h3>
        <div class="other"><span class="type">高级</span><span class="count">~2111在学习</span></div>
      
      </li>
      <li class="top">
       <img src="../../picture/all.jpeg" alt="">
       <div class="bottom">
        <h3 class="title">java从零基础到frevdcsddd大师</h3>
       <div class="other"><span class="type">高级</span><span class="count">~2111在学习</span></div>
     
       </div>
        </li>
      <li class="top">
        <img src="../../picture/all.jpeg" alt="">
       <div class="bottom">
        <h3 class="title">java从零基础到frevdcsddd大师</h3>
       <div class="other"><span class="type">高级</span><span class="count">~2111在学习</span></div>
     
      </li>
      <li class="top">
        <img src="../../picture/all.jpeg" alt="">
        <div class="bottom">
         <h3 class="title">java从零基础到frevdcsddd大师</h3>
        <div class="other"><span class="type">高级</span><span class="count">~2111在学习</span></div>
      
      </li>
     
      <li class="top">
        <img src="../../picture/all.jpeg" alt="">
       <div class="bottom">
        <h3 class="title">java从零基础到frevdcsddd大师</h3>
       <div class="other"><span class="type">高级</span><span class="count">~2111在学习</span></div>
     
      </li>
       
       <li class="five">
        <img src="../../picture/all.jpeg" alt="">
        <div class="bottom">
         <h3 class="title">java从零基础到frevdcsddd大师</h3>
        <div class="other"><span class="type">高级</span><span class="count">~2111在学习</span></div>
      
      </li>
      <li>
        <img src="../../picture/all.jpeg" alt="">
        <div class="bottom">
         <h3 class="title">java从零基础到frevdcsddd大师</h3>
        <div class="other"><span class="type">高级</span><span class="count">~2111在学习</span></div>
      
      </li>
      <li>
        <img src="../../picture/all.jpeg" alt="">
       <div class="bottom">
        <h3 class="title">java从零基础到frevdcsddd大师</h3>
       <div class="other"><span class="type">高级</span><span class="count">~2111在学习</span></div>
     
      </li>
      <li>
        <img src="../../picture/all.jpeg" alt="">
       <div class="bottom">
        <h3 class="title">java从零基础到frevdcsddd大师</h3>
       <div class="other"><span class="type">高级</span><span class="count">~2111在学习</span></div>
     
      </li>
      <li>
        <img src="../../picture/all.jpeg" alt="">
        <div class="bottom">
         <h3 class="title">java从零基础到frevdcsddd大师</h3>
        <div class="other"><span class="type">高级</span><span class="count">~2111在学习</span></div>
      
      </li>
     </ul>
    </div>
  </div>
</body>
<script>
  new Vue({
    el: '#root',
    data() {
      return {
        subnavList: [
          '前端开发',
          '后端开发',
          '人工智能',
          '移动开发',
          '商业预测',
          '云计算&大数据',
          '运维&测试',
          'UI设计',
          '产品',
        ]
      }
    },
  })
</script>

</html>